/*
 * @Author: many
 * @Date: 2020-06-19 00:12:38
 * @LastEditors: di
 * @LastEditTime: 2020-06-29 10:01:01
 * @Description: file content
 */
"use strict";
const autoprefixer = require("autoprefixer");
const pxtoviewport = require("postcss-px-to-viewport");
const path = require("path");
const defaultSettings = require("./src/settings.js");

const name = defaultSettings.title || "默认title";
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  outputDir: "dist",
  // publicPath: process.env.NODE_ENV === "production" ? "/vant-demo/" : "/",
  assetsDir: "static",
  publicPath: "./",
  lintOnSave: process.env.NODE_ENV === "development",
  productionSourceMap: false,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport({
            viewportWidth: 375,
            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
            viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位
            selectorBlackList: [
              // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
              "ignore",
            ],
          }),
        ],
      },
      // less: {
      //   prependData: `@import "~@/styles/variables.less";`,
      // },
    },
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        //这个是加上自己的路径，
        //注意：试过不能使用别名路径
        path.resolve(__dirname, "./src/styles/_variables.less"),
      ],
    },
  },
  devServer: {
    disableHostCheck: true,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: "http://192.168.1.20",
        // ws: true,
        changeOrigin: true,
        // pathRewrite: {
        //   ["^" + process.env.VUE_APP_BASE_API]: "",
        // },
      },
    },
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },
  chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();

    // set preserveWhitespace
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap((options) => {
        options.compilerOptions.preserveWhitespace = true;
        return options;
      })
      .end();

    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === "development", (config) =>
        config.devtool("cheap-source-map")
      );
  },
};
